<template>
    <h1>动画使用</h1>
    
    <div class="animation-container">
        <div :class="['button', status ? 'button-active' : '']" @click="status = !status">
            <div class="line line2"></div>
            <div class="line line3"></div>
            <div class="line line1"></div>
        </div>
    </div>

    <div class="block-ctain">
        <div class="title" @click="show = !show">
            <span class="font">标题</span>
            <span :class="['icon',show?'icon-active':'']" >></span>
        </div>
        <Transition 
            appear 
            name="slide"
            @before-enter="slideBeforeEnter"
            @enter="slideEnter"
            @after-enter="slideAfterEnter"    
            @before-leave="slideBeforeLeave"
            @leave="slideLeave"
            @after-leave="slideAfterLeave"
        >
            <div class="cont" v-if="show">
                <div class="cont-slide">
                    <p>
                        内容内容内容内容内容
                    </p>
                    <p>
                        内容内容内容内容内容
                    </p>
                    <p>
                        内容内容内容内容内容
                    </p>
                    <p>
                        内容内容内容内容内容
                    </p>
                </div>
            </div>
        </Transition>
        <div class="title">标题2</div>
    </div>

    <input type="date" v-model="date" />
    <input type="time"  v-model="time" />
    <input type="color" v-model="color" />

    <details>
        <summary>标题1</summary>
        <p>内容内荣</p>
        <details>
            <summary>标题2</summary>
            <p>内容2内容2</p>
        </details>
    </details>


    
</template> 

<script setup>
import { reactive, ref, watchEffect } from "vue";
const vData = reactive({});
const status = ref(false);
const show = ref(false);
const date = ref('')
const time = ref('')
const color = ref('')
watchEffect(() => {
    console.log("date："+date.value);
    console.log("time："+time.value);
    console.log("color："+color.value);
})
const slideBeforeEnter = (el) => {
    el.classList.add('cont-transition')
    el.style.height = '0';
    el.style.overflow = 'hidden';
}
const slideEnter = (el) => {
    // let height = el.children[0].getBoundingClientRect().height;
    let height = el.scrollHeight;
    el.style.height = height+'px';
}
const slideAfterEnter = (el) => {
    el.style.height = '';
    el.style.overflow = '';
    el.classList.remove('cont-transition');
}
const slideBeforeLeave = (el) => {
    // let height = el.children[0].getBoundingClientRect().height;
    el.classList.add('cont-transition');
    let height = el.scrollHeight;
    el.style.height = height+'px';
    el.style.overflow = 'hidden';
}
const slideLeave = (el) => {
    el.style.height = '0';
}
const slideAfterLeave = (el) => {
    el.classList.remove('cont-transition');
    el.style.height = '';
    el.style.overflow = '';
}
</script>

<style lang="scss" scoped>
.animation-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;

    $lineLength: 60px;

    .button {
        width: 90px;
        height: 90px;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 0 20px rgba(0, 0, 0, .16);
        overflow: hidden;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all .8s ease;
        margin:40px;


        .line {
            position: absolute;
            left: 15px;
            height: 4px;
            border-radius: 2px;
            background-color: rgb(2, 104, 238);
            transition: all .5s;
        }

        .line1 {
            transform: translateY(-20px);
            width: 40px;
        }

        .line2 {
            width: $lineLength;
        }

        .line3 {
            transform: translateY(20px);
            width: 25px;
        }
    }

    .button:hover {

        // background:rgb(250, 23, 80);
        // .line{
        //     background-color: #fff;
        // }
        .line1 {
            transform: translateY(0) rotate(45deg);
            width: $lineLength;
            transition-delay: .15s;
        }

        .line2 {
            transform: translateX(150%);
        }

        .line3 {
            transform: translateY(0) rotate(315deg);
            width: $lineLength;
            transition-delay: .25s;
        }
    }
  
    
}
.block-ctain{
    margin-top: 20px;
    width: 500px;
    *{
        margin:0; padding:0;
    }
    .title{
        line-height: 60px;
        cursor: pointer;
        background-color: rgba(230,230,203,1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:0 10px;

        .icon{
            font-size: 22px;
            transition: .5s;
        }
        .icon-active{
            transform: rotateZ(90deg);
        }
    }
    .cont{
        // overflow: hidden;
        p{
            line-height: 40px;
        }
    }

    .cont-transition{
        transition:height .5s;
    }
    

    .slide-enter-active,.slide-leave-active{
        .cont-slide{
            transition: .5s ease-out;
            // transition-delay: .2s;
        }
    }
    .slide-enter-from,.slide-leave-to{
        .cont-slide{
            transform: translateY(-30px);
            // opacity: 0;
        }
    }
   
}
</style>
